<template>
  <view class="tab-container">
    <!-- 导航按钮 -->
    <view class="tab-nav">
      <view 
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-button"
        :class="[currentIndex === index ? 'active' : '']"
        @tap="handleSwitch(index)"
      ></view>
    </view>

    <!-- 滑动内容区域 -->
    <swiper 
      class="tab-content"
      :current="currentIndex"
      @change="swiperChange"
      :duration="300"
      :disable-touch="false"
    >
      <swiper-item 
        v-for="(item, index) in tabList"
        :key="index"
      >
        <view class="content-item">
          <image 
            :src="item.image"
            mode="aspectFit"
            class="content-image"
            :lazy-load="true"
          />
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabList: [
        { image: '/static/k1.png' },
        { image: '/static/k2.png' },
        { image: '/static/k3.png' },
        { image: '/static/k4.png' },
        { image: '/static/k5.png' },
        { image: '/static/k6.png' },
        { image: '/static/k7.png' }
      ]
    }
  },
  methods: {
    handleSwitch(index) {
      if (this.currentIndex === index) return
      this.currentIndex = index
    },
    swiperChange(e) {
      this.currentIndex = e.detail.current
    }
  }
}
</script>

<style lang="scss" scoped>
/* 使用rpx适配多端 */
$btn-size: 60rpx;
$active-color: #007AFF;

.tab-container {
  padding: 30rpx;
}

.tab-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
  gap: 20rpx;
}

.tab-button {
  width: $btn-size;
  height: $btn-size;
  border-radius: $btn-size;
  background-color: #F0F0F0;
  transition: all 0.3s ease;
  
  &.active {
    background-color: $active-color;
    transform: scale(1.1);
  }
}

.tab-content {
  height: 800rpx;
  overflow: hidden;
  border-radius: 24rpx;
}

.content-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}

.content-image {
  max-width: 90%;
  max-height: 90%;
  opacity: 0;
  transition: opacity 0.3s;
  
  &.loaded {
    opacity: 1;
  }
}
</style>